<template>
    <Form ref="formValidate" class="exform" :model="formValidate" :label-width="80" :rules="ruleValidate">

		<FormItem label="专业类别" prop="experttype" style="width:50%" >
			<Select v-model="formValidate.experttype"  style="width:80%" transfer>
				<Option v-for="item in otherList.expertcategory" :value="item.dictionary_id" :key="item.dictionary_id"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>
			</Select> 
		</FormItem>

		<FormItem label="行业类别" prop="tradeid"  style="width:50%" >
			<Select v-model="formValidate.tradeid"  style="width:80%" transfer>
				<Option v-for="item in otherList.industrycategory" :value="item.dictionary_id" :key="item.dictionary_id"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>
			</Select>
		</FormItem>

		<FormItem label="资格"  style="width:50%" >
			<Input  v-model="inputstylename" readonly style="width:50%"></Input>
			<Button @click="onChange('资格',2)">点击选择</Button>
		</FormItem>

		<FormItem label="现从事专业"  style="width:50%" >
			<Input v-model="jobtypeidname" readonly style="width:50%"></Input>
			<Button @click="onChange('现从事专业',1)">点击选择</Button>
		</FormItem>

		<FormItem label="取得时间" prop="takedate"  style="width:50%">
			<DatePicker v-model="formValidate.takedate" type="date"  placeholder="请选择时间" style="width: 200px" transfer></DatePicker>
		</FormItem>

		<FormItem label="等级" prop="jtlevelid"  style="width:50%" >
			<Select v-model="formValidate.jtlevelid"  style="width:80%" transfer>
			<Option v-for="item in Rank" :value="item.dictionary_id" :key="item.dictionary_id"> {{item.dictionary_name.zh?item.dictionary_name.zh:item.dictionary_name.mn}}</Option>
			</Select>
		</FormItem>

		<FormItem label="证书编号" prop="certificateno"  style="width:50%">
			<Input v-model="formValidate.certificateno" placeholder="证书编号" style="width:80%">
			</Input>
		</FormItem>

		<FormItem label="是否任聘" prop="isemploy"  style="width:50%">
			<RadioGroup v-model="formValidate.isemploy">
			<Radio :label="1">不是</Radio>
			<Radio :label="2">是</Radio>
			</RadioGroup>
		</FormItem>

		<FormItem label="授予部门" prop="awarddept.zh"  style="width:50%">
			<Input v-model="formValidate.awarddept.zh" placeholder="授予部门" style="width:80%">
			</Input>
		</FormItem>
      
		<FormItem label="上传附件">
				<upload ref='upload' v-if="UpImgShow" @imagess='imagess'  :Universalurl='imgUrl'></upload>
		</FormItem>

		<div style="width:90%;">
			<FormItem style="width:100%;">
			<Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
			</FormItem>
		</div>
		<div style="clear:both"></div>
		<Spin size="large" fix v-if="spinShow"></Spin>
		<Modal
			v-model="modals"
			:title="titleModal"
			width="540"
			class-name="vertical-center-modal" style="position: relative;">
			<p slot="header" style="text-align:center;">
				<span>{{titleModal}}</span>
			</p>
			<Collapse @on-change="onChanges" accordion style="height: 300px;overflow: auto;">
				<Panel v-for="(item,index) in conlist"  :key="item.id" :name='index.toString()'>
					{{item.name}}
					<p slot="content" style=" position: relative;">
						<RadioGroup v-for="val in conlistcher" :key="val.id" vertical style="display:block;" @on-change="onChangess($event,val.name)">
							<Radio :label="val.id">
								<span>{{val.name}}</span>
							</Radio>
						</RadioGroup>
						<Spin size="large" fix v-if="spinShowModals"></Spin>
					</p>
				</Panel>
			</Collapse>
			<Spin size="large" fix v-if="spinShowModal"></Spin>
		</Modal>
    </Form>
</template>

<script>
  export default {
    props: {
        teacher_id: {
            type: [Number,String],
            default: null
        },
        infoId: {
            type: [Boolean,String,Number],
            default: false
        }
    },
    components: {
        Upload:resolve => {require(['$m/Teacher/TeacherInformation/Upload.vue'], resolve);},
    },
    data () {
      return {
            infoUrl:`api/teacher/v1/qualification/find/${this.infoId}`,//请求单条数据
            saveUrl:'',//保存接口
            saveType:null,//保存方式
            spinShow:false,//加载动画

            UpImgShow:false,
            imgUrl:null,
			infoOld:null,
			
			modals:false,
			spinShowModal:false,
			spinShowModals:false,
			titleModal:'',
			typeModal:null,
			conlist:[],
			conlistcher:[],

			jobtypeidname:'',
			inputstylename:'',

			otherList:[], 
			Rank:[],
		
			formValidate: {
				teacher_id:this.teacher_id,
				experttype:'',   //专业类别
				tradeid:'',     //行业类别
				inputstyle:'',   //资格
				jobtypeid:'',    //现从事专业
				takedate:'',     //取得实际
				jtlevelid:'',    //等级id
				certificateno:'', //证书编号
				isemploy:1,     //是否聘任
				shenhe:1,       //审核
				awarddept:{
					zh:'',
					mn:'',
					en:'',
				},    //授予部门
			},
			ruleValidate: {
				// 专业类别
				experttype: [
					{ type:'number',required: true, message: '请选择专业类别', trigger: 'change' }
				],
				// 行业类别
				tradeid: [
					{ type:'number',required: true, message: '请选择行业类别', trigger: 'change' }
				],
				// 资格
				inputstyle: [
					{ type:'number',required: true, message: '请选择资格', trigger: 'blur' }
				],
				// 现从事专业
				jobtypeid: [
					{  type:'number',required: true, message: '请选择现从事专业', trigger: 'blur' }
				],
				// 取得时间
				takedate: [
					{ required: true, type: 'date', message: '请选择时间', trigger: 'blur' }
				],
				// 等级
				jtlevelid: [
					{ type:'number',required: true, message: '请选择等级', trigger: 'change' }
				],
				//证书编号
				certificateno: [
					{ required: true, message: '请填写证书编号', trigger: 'blur' }
				],
				//授予部门
				'awarddept.zh': [
					{ required: true, message: '请填写授予部门', trigger: 'blur' }
				],
				//是否聘用
				'isemploy': [
					{ type:'number',required: true, message: '请选择是否聘用', trigger: 'change' }
				],
			},
      }
    },
    methods: {

        /************************************************************
         * 
         * 图片上传回调函数
         * 
         ************************************************************/
        imagess(val){   
          this.formValidate.file_cache_ids=val
        },

	  
        /************************************************************
         * 
         * 点击两个点击选择按钮
         * 
         ************************************************************/
		onChange(title,type){
			// type  1先从事事业  2资格
			this.titleModal=title
			this.typeModal=type
			this.modals=true
			if(type==1){
				this.clickJobtypeid()
			}
			if(type==2){
				this.clickInputstyle()
			}
		},

        /************************************************************
         * 
         * 点击分类时触发事件
         * 
         ************************************************************/
		onChanges(value){
			if(this.typeModal==1){
				this.selectCareer(value[0])
			}
			if(this.typeModal==2){
				this.selectQualification(value[0])
			}

		},

        /************************************************************
         * 
         * 点击某个子分类时触发事件
         * 
         ************************************************************/
		onChangess(val,obj){
			if(this.typeModal==1){
				this.jobtypeidname=obj
				this.formValidate.jobtypeid=val;
			}
			if(this.typeModal==2){
				this.inputstylename=obj
				this.formValidate.inputstyle=val;
			}
		},

        /************************************************************
         * 
         * 先从事事业
         * 
         ************************************************************/
		clickJobtypeid(){
			this.spinShowModal=true
			this.$http.get('api/teacher/v1/get/teacher/indextu')
			.then(val=>{
				val.data.forEach(item => {
					item.id=item.id.toString()
				});
				this.conlist=val.data
				this.spinShowModal=false
			}).catch(err => {
				if(err.code && err.code==422) {
					this.$Message.error(err.message);
				}
				this.spinShowModal=false
			});
		},
		
        /************************************************************
         * 
         * 资格
         * 
         ************************************************************/
		clickInputstyle(){
			this.spinShowModal=true
			this.$http.get('api/teacher/v1/get/teacher/indexon')
			.then(val=>{
				val.data.forEach(item => {
					item.id=item.id.toString()
				});
				this.conlist=val.data
				this.spinShowModal=false
			}).catch(err => {
				if(err.code && err.code==422) {
					this.$Message.error(err.message);
				}
				this.spinShowModal=false
			});
		},

        /************************************************************
         * 
         * 资格子集
         * 
         ************************************************************/
		selectQualification(value){
			this.spinShowModals=true
			this.$http.get('api/teacher/v1/get/teacher/indexs?id='+this.conlist[value].id)
			.then(val=>{
				val.data.forEach(item => {
					item.id=item.id.toString()
				});
				this.conlistcher=val.data
				this.spinShowModals=false
			}).catch(err => {
				if(err.code && err.code==422) {
					this.$Message.error(err.message);
				}
				this.spinShowModals=false
			});
		},

        /************************************************************
         * 
         * 先从事事业子集
         * 
         ************************************************************/
      	selectCareer(value){
			this.spinShowModals=true
			this.$http.get('api/teacher/v1/get/teacher/indexs?id='+this.conlist[value].id)
			.then(val=>{
				val.data.forEach(item => {
					item.id=item.id.toString()
				});
				this.conlistcher=val.data
				this.spinShowModals=false
			}).catch(err => {
				if(err.code && err.code==422) {
					this.$Message.error(err.message);
				}
				this.spinShowModals=false
			})
      	},
        
        /************************************************************
         * 
         * 单条数据请求
         * 
         ************************************************************/
        infoData(){
            this.$http.get(this.infoUrl).then(val=>{
                this.infoOld = JSON.parse(JSON.stringify(val.data))
                this.formValidate.experttype = parseInt(this.infoOld.experttype)//用于默认选的 专业类别
                this.formValidate.tradeid = parseInt(this.infoOld.tradeid)//用于默认选的  行业类别
                this.formValidate.inputstyle = parseInt(this.infoOld.inputstyle)//用于默认选的 资格
                this.inputstylename=this.infoOld.inputstyle_name
                this.formValidate.jobtypeid = parseInt(this.infoOld.jobtypeid)//用于默认选的 现从事专业
                this.jobtypeidname=this.infoOld.jobtypeid_name
                this.formValidate.isemploy = parseInt(this.infoOld.isemploy)//用于默认选的 是否聘任
                this.formValidate.shenhe = parseInt(this.infoOld.shenhe)//用于默认选的 审核
                this.formValidate.jtlevelid = parseInt(this.infoOld.jtlevelid)//用于默认选的 等级
                
                this.formValidate.takedate = this.infoOld.takedate// 取得实际
                this.formValidate.certificateno = this.infoOld.certificateno// 证书编号
                this.formValidate.awarddept = this.infoOld.awarddept// 授予部门
                this.formValidate.school_id=this.infoOld.school_id;//学校
                this.formValidate.teacher_id=this.infoOld.teacher_id;//教师
                this.imgUrl = this.infoOld.imgs.map(item => {
                    let arr = {               
                        security_check_picture_id:item.id,                       
                        photos_url:item.url 
                    }
                    return arr
                })
                this.UpImgShow = true
                this.spinShow=false//输入框禁用  
            })
			.catch(err => {
				if(err.code && err.code==422) {
					this.$Message.error(err.message);
				}
                this.spinShow=false//输入框禁用  
			});
		},
		
        /************************************************************
         * 
         * 提交时
         * 
         ************************************************************/
      	handleSubmit (name) { 
            if(this.formValidate.inputstyle==''){
			    this.$Message.error('资格不得为空!');
			   	return
			}

			if( this.formValidate.jobtypeid==''){
			   	this.$Message.error('现从事专业不得为空!');
			   	return
            }
            this.$refs[name].validate((valid) => {
                if (valid) {       
                    this.spinShow=true//输入框禁用   
                    this.saveType(this.saveUrl,this.formValidate).then(val=>{
                        this.$emit('showParent',false)
                        this.$emit('backList',true)
                        this.$Message.success(val.message);
                        this.spinShow=false
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow=false
                    })  
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
      	},
    },
    created() {
        /************************************************************
         * 
         * 查询专业类别和专家类别
         * 
         ************************************************************/
		this.$http.get('api/dictionary/v1/dictionary/pidquerys?expertcategory&industrycategory')
		.then(val=>{
			this.otherList = val.data
			this.spinShow=false//输入框禁用 
		})
		.catch(err => {
			if(err.code && err.code==422) {
				this.$Message.error(err.message);
			}
			this.spinShow=false//输入框禁用 
		});
		
        /************************************************************
         * 
         * 等级
         * 
         ************************************************************/
		this.$http.get('api/dictionary/v1/dictionary/pidquerys?qualificationgrade')
		.then(val=>{
			this.Rank=val.data.qualificationgrade
			this.spinShow=false//输入框禁用 
		})
		.catch(err => {
			if(err.code && err.code==422) {
				this.$Message.error(err.message);
			}
			this.spinShow=false//输入框禁用 
		});

        if(this.infoId==false){
            // add
            this.UpImgShow=true
            this.saveUrl='api/teacher/v1/qualification/add'
            this.saveType=this.$http.post

        }else{
            // edit
            this.infoData();
            this.saveUrl=`api/teacher/v1/qualification/edit/${this.infoId}`
            this.saveType=this.$http.post
        }
    },
  }
</script>
<style lang="less">
@import'./../public.less';
</style>

